<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="sheng">
    <option value="-1">请选择省份</option>
<!--    <option value="湖南省">湖南省</option>-->
<!--    <option value="广东省">广东省</option>-->
</select>
<select id="shi">
    <option value="-1">请选择城市</option>
<!--    <option value="衡阳市">衡阳市</option>-->
<!--    <option value="岳阳市">岳阳市</option>-->
<!--    <option value="广州市">广州市</option>-->
<!--    <option value="湛江市">湛江市</option>-->
</select>
<select id="qu">
    <option value="-1">请选择县区</option>
    <option value="高新区">高新区</option>
    <option value="白云区">白云区</option>
    <option value="天河区">天河区</option>
    <option value="赤坎区">赤坎区</option>
    <option value="霞山区">霞山区</option>
</select>
<script src="../js/cities.js"></script>
<script>
    let selectSheng = document.querySelector("#sheng");
    let selectShi = document.querySelector("#shi");
    let selectQu = document.querySelector("#qu");
    position.forEach(function (value, index) {
        // console.log(value);
        let opt = document.createElement("option");
        opt.value = value.value;
        opt.text = value.label;
        selectSheng.add(opt);
    });

    let shi;//保存当前选中的市

    selectSheng.onchange = function (event) {
        // console.log(event.target);//代表触发事件的对象
        let selectedOpt = event.target.item(event.target.selectedIndex);
        // for (let i = 0; i < position.length; i++) {
        //     if (position[i].value == selectedOpt.value) {
        //         position[i].children.forEach(value => {
        //             let opt = document.createElement("option");
        //             opt.value = value.value;
        //             opt.text = value.label;
        //             selectShi.add(opt);
        //         });
        //     }
        // }
        while (selectShi.hasChildNodes()) {
            selectShi.firstChild.remove();
        }
        selectShi.innerHTML = "<option value='-1'>请选择城市</option>";
        shi = position.filter(value => value.value == selectedOpt.value)[0];
        console.log(shi);
        shi.children.forEach(value => {
            let opt = document.createElement("option");
            opt.value = value.value;
            opt.text = value.label;
            selectShi.add(opt);
        })
     }

    selectShi.onchange = function (event) {
        // console.log(event.target);//代表触发事件的对象
        let selectedOpt = event.target.item(event.target.selectedIndex);
        while (selectQu.hasChildNodes()) {
            selectQu.firstChild.remove();
        }
        selectQu.innerHTML = "<option value='-1'>请选择县区</option>";
        // console.log(position.filter(value => {
        //     console.log(value, selectedOpt.value);
        //     return value.value == selectedOpt.value
        // }));
        shi.children.filter(value => value.value == selectedOpt.value)[0].children.forEach(value => {
            let opt = document.createElement("option");
            opt.value = value.value;
            opt.text = value.label;
            selectQu.add(opt);
        })
    }
</script>
</body>
</html>